<!--
 * @Author: zhangweinan
 * @Date: 2023-04-12 11:36:20
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-04-26 13:15:32
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\bpm\processPublish\publish.vue
-->
<template>
  <div class="publish_div">
    <el-form :model="form" label-width="120px">
      <el-form-item label="流程选择：">
        <el-select
          v-model="form.modelId"
          placeholder="请选择流程"
          filterable
          style="width: 100%"
        >
          <el-option
            v-for="flow in flowData"
            :label="flow.name"
            :value="flow.modelId"
            :key="flow.modelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="登陆验证：">
        <el-radio-group v-model="form.loginType">
          <el-radio :label="1">需要</el-radio>
          <el-radio :label="0">不需要</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="对谁可见：">
        <el-radio-group v-model="form.resource" disabled>
          <el-radio label="角色"></el-radio>
          <el-radio label="部门"></el-radio>
          <el-radio label="岗位"></el-radio>
          <el-radio label="用户"></el-radio>
        </el-radio-group>
      </el-form-item> -->
      <!-- <el-form-item label="指定用户：">
        <el-select
          v-model="form.user"
          placeholder="请选择用户"
          style="width: 100%"
          disabled
        >
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="URL：">
        <el-input
          type="textarea"
          v-model="form.desc"
          :rows="3"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="url_btn"
          >生成URL</el-button
        >
        <el-button
          class="copy_url_btn"
          @click="onCopy"
          :data-clipboard-text="form.desc"
          >复制</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getAllOnLine, createProcessShareUrl } from "@/api/bpm/definition";
import Clipboard from "clipboard";
export default {
  props: {},
  data() {
    return {
      form: {
        modelId: "",
        loginType: 0,
        user: "",
        resource: "",
        desc: "等待生成",
      },
      flowData: [],
    };
  },
  created() {
    this.getFlowList();
  },
  methods: {
    onSubmit() {
      if (!this.form.modelId) {
        this.$message.info("未选择流程！");
        return;
      }
      let params = {};
      params.loginType = this.form.loginType;
      params.modelId = this.form.modelId;
      createProcessShareUrl(params).then((res) => {
        this.form.desc = res.data;
        this.$message.success("URL生成成功");
      });
    },
    onCopy() {
      var clipboard = new Clipboard(".copy_url_btn");
      clipboard.on("success", (e) => {
        this.$message.success("复制成功");
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$message.error("该浏览器不支持自动复制");
        // 释放内存
        clipboard.destroy();
      });
    },
    async getFlowList() {
      const res = await getAllOnLine();
      const flowData = res?.data || [];
      this.flowData = flowData;
      return flowData;
    },
    //重置参数
    resetPublishForm() {
      this.form = {
        modelId: "",
        loginType: 0,
        user: "",
        resource: "",
        desc: "等待生成",
      };
    },
  },
};
</script>
<style scoped lang="scss">
.publish_div {
  padding: 32px 0;
  width: 470px;
  .url_btn {
    display: inline-block;
    width: 156px;
    height: 40px;
    background: #0047ea;
    border-radius: 2px 2px 2px 2px;
  }
  .copy_url_btn {
    display: inline-block;
    width: 156px;
    height: 40px;
    background: #f6f7f8;
    border-radius: 2px 2px 2px 2px;
  }
}
</style>
